<template>
    <div>
        <!-- 用户列表 -->
        <h1>订单列表</h1>
        <!-- 面包屑 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item><a href="#">首页</a></el-breadcrumb-item>
            <el-breadcrumb-item>订单管理</el-breadcrumb-item>
            <el-breadcrumb-item>订单列表</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 卡片 -->
        <el-card class="box-card">
            <!-- 搜索框 -->
            <div class="text item">
                <div style="margin-bottom: 15px;">
                    <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
                        <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </div>
            </div>
            <!-- 表单 -->
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column type="index" label="#">
                </el-table-column>
                <el-table-column prop="order_number" label="订单编号" width="180">
                </el-table-column>
                <el-table-column prop="order_price" label="订单价格" width="180">
                </el-table-column>
                <el-table-column prop="order_pay" label="是否付款">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.order_pay == 0" type="success">已付款</el-tag>
                        <el-tag v-else type="danger">未付款</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="is_send" label="是否发货">
                </el-table-column>
                <el-table-column prop="create_time" label="下单时间">
                    <template slot-scope="scope">
                        {{ scope.row.created_time | time }}
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="操作">
                    <template slot-scope="scope">
                        <!-- 编辑 -->
                        <el-tooltip content="修改订单地址" placement="top" effect="light">
                            <el-button size="mini" class="el-icon-edit" type="primary"
                                @click="handleEdit(scope.$index, scope.row)"></el-button>
                        </el-tooltip>
                        <!-- 删除 -->
                        <el-tooltip content="物流信息" placement="top" effect="light">
                            <el-button size="mini" type="success" class="el-icon-location"
                            @click="handleDelete(scope.$index, scope.row)"></el-button>
                        </el-tooltip>
                        
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="info.pagenum" :page-sizes="[10, 20, 30, 40]" :page-size="info.pagesize"
                    layout="total, sizes, prev, pager, next, jumper" :total="info.total">
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>
<script>
import { ordersList } from '../request/Api'
export default {
    data() {
        return {
            // 搜索框双向数据绑定
            input3: '',
            // 表格
            tableData: [],
            // 分页 默认第几页 订单列表参数
            info: {
                // 查询参数
                query: '',
                // 当前页码
                pagenum: 1,
                // 每页显示条数
                pagesize: 10,
                // 用户ID
                user_id: '',
                // 支付状态
                pay_status: '',
                // 是否发货
                is_send: '',
                // 个人公司
                order_fapiao_title: '',
                // 公司名称
                order_fapiao_company: '',
                // 发票内容
                order_fapiao_content: '',
                // 发货地址
                consignee_addr: '',
                // 一个多少条
                total: null,
            },
            // 查询商品id
            order_id: 0
        }
    },
    // 过滤时间
    filters: {
        time(value) {
            return new Date().toLocaleString(value)
        }
    },
    created() {
        // 进入页面开始执行一次
        this.getList()
    },
    methods: {
        // 页面渲染
        getList() {
            ordersList({ params: this.info }).then(res => {
                this.tableData = res.data.data.goods
                this.info.total = res.data.data.total
                console.log(res);
            })
        },
        // 编辑删除
        handleEdit(index, row) {
            console.log(index, row);
        },
        handleDelete(index, row) {
            console.log(index, row);
        },
        // 分页
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.info.pagesize = val
            this.getList()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.info.pagenum = val
            this.getList()
        }
    },
}
</script>
<style lang="scss" scoped>
.box-card {
    width: 96%;
    margin: 20px auto;

    .text {
        width: 400px;
    }
}
</style>